<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas</title>
</head>

<style>
    #myCanvas {
        margin: 100px auto;
        display: block;
    }

    body {
        background-color: yellowgreen;
    }
</style>

<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>


<script>
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");
    var pi = Math.PI;
    ctx.translate(150, 150);


    draw(3 / 2, {x: 0, y: 0, r: 150, sDeg: 0, eDeg: 1}, "#fff");
    draw(1, {x: 0, y: 0, r: 150, sDeg: 0, eDeg: 1}, "#000");

    draw(1, {x: 75, y: 0, r: 75, sDeg: 0, eDeg: 1}, "#000"); 
    draw(1, {x: 75, y: 0, r: 75, sDeg: 0, eDeg: 1}, "#fff");

    draw(1, {x: 75, y: 0, r: 10, sDeg: 0, eDeg: 2}, "#fff");
    draw(1, {x: 75, y: 0, r: 10, sDeg: 0, eDeg: 2}, "#000");


    function draw(rotateDeg, arcObj, fillStyleColor) {
        ctx.beginPath();
        ctx.rotate(pi * rotateDeg);
        ctx.arc(arcObj.x, arcObj.y, arcObj.r, arcObj.sDeg * pi, arcObj.eDeg * pi);
        ctx.fillStyle = fillStyleColor;
        ctx.fill();
    }


</script>

</html>